<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单--结算</title>
    <link rel="icon" href="CX.png" type="image/png">
    <link rel="stylesheet" href="dingdan.css">
</head>

<body>
    <header>
        <div class="container-1">
            <p onclick="if (window.opener && !window.opener.closed) {
            window.close();
            } else if (document.referrer) {
                location.href = document.referrer;
            } else {
                window.open('index.html', '_self');
            }">←&nbsp;&nbsp;&nbsp;返回</p>
        </div>      
        <div class="container">            
            <div class="logo">
                <img class="CX" src="CX.png" alt="">
                <img class="CXCN" src="CXCN.png" alt="">
            </div>
            <span>订单结算中......</span>
        </div>
    </header>
    <div class="content">
        <div class="container">
            <table width="100%" style="border: 1.5px solid #E6E6E6;padding: 10px;">
                <tr><td style="font-size: 18px;padding:2px 0px 5px 0px;">填写并核对订单信息：</td></tr>
                <tr><td colspan="4"><hr></td></tr>
                <tr><td class="title" align="left" style="font-size: 16px;font-weight: bold;">收货人信息</td>
                    <td class="address" align="right" colspan="3" style="font-size: 12px;color: #109601;cursor: pointer;">新增/修改收获地址、收货人信息</td>
                </tr>
                <tr><td colspan="4" align="left" style="font-size: 14px; color: gray;padding: 20px 0px 20px 40px;">
                    李四&nbsp;&nbsp;
                    广西&nbsp;&nbsp;梧州市&nbsp;&nbsp;岑溪市&nbsp;&nbsp;
                    岑城镇&nbsp;&nbsp;工农路&nbsp;&nbsp;40号&nbsp;
                    </td>
                </tr>
                <tr><td colspan="4"><hr></td></tr>
                <tr><td style="font-size: 16px;font-weight: bold;padding: 10px 0px 5px 0px;">支付方式</td></tr>
                <tr><td style="padding: 10px 0px 5px 0px;"><button>微信支付</button><button>支付宝</button><button>银行卡</button></td></tr>
                <tr><td colspan="4"><hr></td></tr>
                <tr><td style="font-size: 16px;font-weight: bold;padding: 10px 0px 5px 0px;">订单详情</td></tr>
                <tr style="background-color: #E6E6E6;">
                    <th style="border-right: 1px solid #E6E6E6;">商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                </tr>
                <tbody id="orderItems">
                    <!-- 商品内容将通过JavaScript动态生成 -->
                </tbody>
                <tr><td colspan="4"><br><br><br></td></tr>
            </table>
            <table width="100%" style="padding: 20px 0px 10px 0px;">
                <tr><td align="right" style="padding: 5px;">商品总金额：&nbsp;&nbsp;<span style="color: red;font-weight: bold;" id="subtotal">0元</span></td></tr>
                <tr><td align="right" style="padding: 5px;">运费：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="shippingFee">10元</span></td></tr>
                <tr><td colspan="2"><br><hr></td></tr>
            </table>
            <table width="100%" style="background-color: #E6E6E6;padding: 10px 0px 10px 0px;">
                <tr><td align="right" colspan="2" style="padding: 5px;">应付金额：<span style="color: red;font-weight: bold;" id="total">10元</span></td></tr>
                <tr><td align="center" >配送至:&nbsp;&nbsp;
                    广西&nbsp;&nbsp;梧州市&nbsp;&nbsp;岑溪市&nbsp;&nbsp;
                    岑城镇&nbsp;&nbsp;工农路&nbsp;&nbsp;40号&nbsp;
                    </td>
                    <td align="right" style="padding: 5px;">收货人：&nbsp;&nbsp;李四</td>
                </tr>
            </table>
            <table width="100%">
                <tr><td align="right" colspan="2"><button id="submitOrderBtn">提交订单</button><br><br><br><br><br></td></tr>
            </table>
        </div>
    </div>
    <div id="orderSuccess">
        下单支付成功，您的好物正在路上...
        <img class="wuliu" src="images/物流.svg" alt="">
    </div>
    <script>
    // 从本地存储加载购物车数据
    const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
    let totalPrice = 0;
    
    // 生成订单表格内容
    function generateOrderTable() {
        const tableBody = document.getElementById('orderItems');
        tableBody.innerHTML = '';
        let subtotal = 0;
        const shippingFee = 10;
        
        cartItems.forEach(item => {
            const itemTotal = item.price * item.quantity;
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="sp-1" align="left">
                    <img src="${item.image}" alt="">
                    <p>${item.name}</p>
                </td>
                <td align="center" width="100px">${item.price.toFixed(1)}元</td>
                <td align="center" width="100px">${item.quantity}</td>
                <td align="center" width="100px">${itemTotal.toFixed(1)}元</td>
            `;
            tableBody.appendChild(row);
            
            // 添加分隔线
            const separator = document.createElement('tr');
            separator.innerHTML = `<td colspan="4" style="border-bottom: 2px solid #109601;"></td>`;
            tableBody.appendChild(separator);
            
            subtotal += itemTotal;
        });
        
        // 更新金额显示
        const total = subtotal + shippingFee;
        document.getElementById('subtotal').textContent = `${subtotal.toFixed(1)}元`;
        document.getElementById('shippingFee').textContent = `${shippingFee.toFixed(1)}元`;
        document.getElementById('total').textContent = `${total.toFixed(1)}元`;
    }
    
    // 页面加载时生成订单表格
    document.addEventListener('DOMContentLoaded', generateOrderTable);
    document.getElementById('submitOrderBtn').addEventListener('click', function() {
        // 显示下单成功提示
        document.getElementById('orderSuccess').style.display = 'block';
        
        // 清空购物车
        localStorage.removeItem('cartItems');
        
        // 3秒后隐藏弹窗并关闭所有窗口
        setTimeout(function() {
            document.getElementById('orderSuccess').style.display = 'none';
            if (window.opener && !window.opener.closed) {
                window.opener.close();
            }
            window.close();
        }, 3000);
    });

</script>

    </script>
</body>
</html>